<template>
    <!-- style="height: 60%; overflow-y: scroll;"  试卷试题展示-->
<div class="affix-container"   style=" height: 600px;overflow-y: scroll;" id="scroll-container">
  <div style="margin: 0 15%;">
    <el-descriptions direction="vertical"  :column="11" class="header-desc"   border  v-if="markType==''">
        <el-descriptions-item align="center" label="考生账号"><a>{{ stuPaperInfo.examinee}}</a></el-descriptions-item>
        <el-descriptions-item align="center" label="考生姓名"><a>{{ stuPaperInfo.name}}</a></el-descriptions-item>
        <el-descriptions-item align="center" label="考试试卷"><a>{{ stuPaperInfo.testPaperName01}}</a></el-descriptions-item>
        <el-descriptions-item align="center" label="考试次数">第<a>{{ stuPaperInfo.currentNumber}}/10</a>次</el-descriptions-item>
        <el-descriptions-item align="center" label="时长"><a>{{ stuPaperInfo.examTime}}</a>分钟</el-descriptions-item>
        <el-descriptions-item align="center" label="总分"><a>{{ stuPaperInfo.totalPoints}}</a>分</el-descriptions-item>
        <el-descriptions-item align="center" label="总得分"><a>{{ stuPaperInfo.score}}</a>分</el-descriptions-item>
        <el-descriptions-item align="center" label="及格分"><a>{{ stuPaperInfo.passMark}}</a>分</el-descriptions-item>
        <el-descriptions-item align="center" label="用时"><a>{{ stuPaperInfo.examTime}}</a>分钟</el-descriptions-item>
        <el-descriptions-item align="center" label="开始时间"><a>{{ stuPaperInfo.startTime}}</a></el-descriptions-item>
        <el-descriptions-item align="center" label="结束时间"><a>{{ stuPaperInfo.endTime}}</a></el-descriptions-item>
    </el-descriptions>
    <div v-for="item in questionTypes" :key="item">
    <div class="types" v-if="item.len>0">
            <p name="question_types">&nbsp;&nbsp;&nbsp;{{ item.type }}</p>
    </div>
    <TestShow :data="item.detailData" :id="testData.id"></TestShow>
    </div>
        <!-- <div class="types">
            <p name="question_types">&nbsp;&nbsp;&nbsp;单选题</p>
        </div>
        <TestShow :data="testData.dx"></TestShow>

        <div class="types">
            <p name="question_types">&nbsp;&nbsp;&nbsp;填空题</p>
        </div>
        <TestShow :data="testData.tk"></TestShow>
 
        <div class="types">
            <p name="question_types">&nbsp;&nbsp;&nbsp;名词解析</p>
        </div>
        <TestShow :data="testData.mc"></TestShow>
 
        <div class="types">
            <p name="question_types">&nbsp;&nbsp;&nbsp;简答题</p>
        </div>
        <TestShow :data="testData.jd"></TestShow>
        <div class="types">
            <p name="question_types">&nbsp;&nbsp;&nbsp;论述题</p>
        </div>
        <TestShow :data="testData.ls"></TestShow>

        <div class="types">
            <p name="question_types">&nbsp;&nbsp;&nbsp;编程题</p>
        </div>
        <TestShow :data="testData.bc"></TestShow> -->

    </div>  
    <!--分页组件 -->
    <div class="page-demo" v-if="markType!=''">
    <el-pagination 
        layout="prev, pager, next,jumper" 
        :page-count="pageInfo.pageCount" 
        prev-text="上一份试卷"
        next-text="下一份试卷"
        @current-change="handlePageChange"
    />
    </div>
    <!-- 快捷定位div -->
    <transition name="el-zoom-in-bottom">
    <div  style="position: absolute;
            right:9%;
            width:82%;
            bottom: 0;
            z-index: 999;
            background: #eeeeee;
            padding: 0;
            display: none;" v-show="drawer">
      <el-tabs type="border-card" >
        <el-tab-pane 
         v-for="(item,index) in questionTypes" 
         :key="item"
         :label="item.type" 
         >
         <el-button color="#ED5565" style="color:#fff" v-for="(i,idx) in item.len" :key="i"
         @click="positioning(item,idx)">{{i}}</el-button>
        </el-tab-pane>
  </el-tabs>
     </div>
    </transition>
   
      <!-- 定位按钮 -->
    <el-card class="box-card"
     body-style="padding:5px 10px;"> 
        <div class="item" v-if="markType==''"><p>总得分:<el-link type="primary" >{{  stuPaperInfo.score }}</el-link>分</p></div>
        <div class="item"><el-button color="#ED5565" style="color:#fff;font-size: 12px;" @click="scrollToTop1">一键置顶</el-button></div>
        <div class="item"><el-button color="#1C84C6" style="color:#fff;font-size: 12px;" @click="drawer=!drawer">快捷定位</el-button></div>
        <div class="item"><el-button color="#23C6C8" style="color:#fff;font-size: 12px;" @click="scrollToBottom">一键置底</el-button></div>
     </el-card>
</div>
</template>
    
<script setup>
    import {ref,reactive,toRefs,onMounted} from 'vue'
    import { getStuPaperTests,getStuPaperTests2 } from '../../../api/exam' ;
    import TestShow from './TestShow.vue';
/*******修改分页组件文字显示******* */
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 自定义文字（使用默认文字不用设置）
zhCn.el.pagination.goto = '跳转到第'
zhCn.el.pagination.pageClassifier = '份试卷'
let pageInfo=reactive({
    pageNum:1,//当前页码
    pageSize:1,//每页显示条数
    pageCount:4//总页数
})
//当前页码
const handlePageChange = (val) => {
	pageInfo.pageNum = val;
	console.log(val,"==")
	console.log(pageInfo.pageNum)
	getData()
};
    const props = defineProps({
        stuPaperInfo:Object,   
        markType:{
            type:String,
            default:''
        }
    })
    const {stuPaperInfo,markType} = toRefs(props)
    console.log(stuPaperInfo,'<<<stuInfoMa',markType.value=='')
    /***********获取学生考卷的信息**************/
    /****定义题型 */
    const questionTypes=ref([])
    const testData = ref({})
    // const testData1 = ref({})
   
    const getData = async () => {
        if(markType.value!=''){
            //获取所有主观题的信息
            await getStuPaperTests2({pageCurrent:pageInfo.pageNum}).then(res=>{
                console.log('所有主观题目的信息>>>',res)
                testData.value = res.data[pageInfo.pageNum-1]
                const data = res.data[pageInfo.pageNum-1]
                 console.log(res.data[pageInfo.pageNum-1].tk.length)
                pageInfo.pageCount=res.data.length //总的试卷数量
                //
                let data1 = []
                data1.push(
                {type:'论述题',len:data.ls.length,detailData:data.ls},
                )
                questionTypes.value=data1
                console.log(questionTypes)
            })
        }else{
            //获取某个学生的试卷信息
            const {data}=  await getStuPaperTests({})
            testData.value= data
            console.log(data,testData.value,'data----------tesD----')
            let data1 = []
            data1.push(
            {type:'单选题',len:data.dx.length,detailData:data.dx},
            {type:'填空题',len:data.tk.length,detailData:data.tk},
            {type:'名词解释',len:data.mc.length,detailData:data.mc},
            {type:'论述题',len:data.ls.length,detailData:data.ls},
            {type:'编程题',len:data.bc.length,detailData:data.bc},
            )
            questionTypes.value=data1
            console.log(questionTypes)
        }
        
       
    };
    getData();



/*******打开抽屉****** */
const drawer = ref(false)

/********一键置顶***********/
const scrollToTop= (scrollContainer, speed = 10, step = 10)     => {
      // scrollContainer：要滚动的容器元素，可以是 window 或任意具有 scrollTop 属性的元素
      // speed：每次滚动的距离，即返回顶部的速度，默认为 10
      // step：每次滚动的时间间隔，单位为毫秒，默认为 10
 
      let scrollTop = scrollContainer.scrollTop;
      const time = setInterval(() => {
        scrollTop -= speed;
        if (scrollTop <= 0) {
          clearInterval(time);
          scrollContainer.scrollTop = 0;
        } else {
          scrollContainer.scrollTop = scrollTop;
        }
      }, step);
    };

const  scrollToTop1=()=>{
    const container = document.querySelector(".affix-container")
    scrollToTop(container,20,10)
}

/********一键置底***********/
const scrollToBottom=() => {
      console.log('回到底部')
      const container = document.querySelector(".affix-container")//获取滚动的容器
      let scroll = container.scrollTop
      console.log('scroll',scroll)
     
      const time = setInterval(() => {
        scroll +=10;
        if(scroll<=container.scrollHeight){
            // console.log('111111',scroll)
            // clearInterval(time)
            container.scrollTop=scroll
        }else{
            console.log('222')
            clearInterval(time)
            container.scrollTop=container.scrollHeight
        }
      },10);
      
};

/****************定位到具体的题目****************** */
const positioning=(item,index)=>{
    let id = item.detailData[index].id
    const btn = document.querySelector('.btn'+id) // 根据类名或ID等选择器获取目标元素
    if(btn){
        btn.scrollIntoView({behavior:'smooth'}) // 平滑滚动效果
    }else{
        console.log('未找到目标元素')
    }
}

</script >
    
<style lang="less" scoped>
 .types {
        padding: 5px;
        background: #eee;
        margin-top: 15px;
    }

    .types p {
        font-size: 15px;
        margin-top: 9px
    }
    .particulars {
        margin-top: 10px;
        border: 1px solid #eeeeee;
        overflow: auto;
    }
    
    .answer {
        background: #e6e6e6;
        overflow: auto;
        padding-top: 10px;
        // padding-bottom: 10px;
        border: 1px solid #eeeeee;
        margin: 0 0;
    }
    .answer p{
        margin: 0 0 10px;
    }
    
.header-desc{
    a{
        cursor: pointer;
        color: #337ab7;
        text-decoration: none;
        background-color: transparent;
    }
}

// .affix-container{
//     position:relative;
// }
.box-card{
    // width:100px;
    background:#eeeeee;
    bottom:50px;
    // position:fixed;
    position:absolute;
    right:3.5%;
    z-index:9999
}
.item {
  padding: 5px 0;

}
/* .opt-drawer{
    :deep .el-overlay{
        position:absolute;
    }
    
}
.drawer-w{
    width:400px;
} */

/* .tabs-container{
    position: absolute;
    right:9%;
    width:82%;
    height:80px;
    bottom: 0;
    z-index: 999;
    background: #eeeeee;
    padding: 0;
    display: none;
} */


.radiosBoxs {
    padding: 10px 0 5px;
    width: auto;
    display: inline-block;
}
.test-footer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 5px;
    text-align: left;
    background-color: #f3f3f3;
    box-shadow: #e6e6e6;
    margin: 5px;
}

/***设置分页组件的样式*/
.page-demo{
    margin-top: 20px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
</style>